<!DOCTYPE html>
<html>
<head>
    <title>库存表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    transition: opacity 0.5s ease;
}

.modal-content {
    margin: 5% auto;
    display: block;
    width: 80%;
    max-width: 700px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    animation: modalOpen 0.5s ease;
}

@keyframes modalOpen {
    from {transform: translateY(-50px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}
img {
    max-width: 100px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s;
}

img:hover {
    transform: scale(1.1);
}
                .export-button {
            margin: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

            #searchInput {
        display: block;
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    </style>
</head>
<body>
<h1>库存表</h1>
<button class="export-button" onclick="exportToXLSX()">导出为XLSX</button>
<input type="text" id="searchInput" class="form-control mb-3" placeholder="搜索产品...">
<table>
    <thead>
    <tr>
        <th>产品图片</th>
        <th>产品ID</th>
        <th>所属客户</th>
        <th>产品名称</th>
        <th>产品型号</th>
        <th>产品颜色</th>
        <th>产品数量</th>
        <th>计量单位</th>
    </tr>
    </thead>
    <tbody>
    {% if products %}
    {% for i in range(products|length-1, -1, -1) %}
    {% set product = products[i] %}
    <tr>
        <td><img class="product-img" src="{{ url_for('static', filename=product[8]) }}" alt="Attachment Image" style="width: 100px; height: 100px;"
                 onclick="openModal()"></td>
        <td>{{ product[0] }}</td>
        <td>{{ product[3] }}</td>
        <td>{{ product[4] }}</td>
        <td>{{ product[5] }}</td>
        <td>{{ product[6] }}</td>
        <td>{{ product[1] }}</td>
        <td>{{ product[7] }}</td>
    </tr>
    {% endfor %}
    {% else %}
    <tr>
        <td colspan="8" class="no-data">没有库存数据。</td>
    </tr>
    {% endif %}
    </tbody>
</table>
<!-- 模态框 -->
<div id="myModal" class="modal">
    <span class="close" onclick="closeModal()">&times;</span>
    <img id="img01" class="modal-content">
    <div id="caption"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<script>
    function openModal() {
        document.getElementById('myModal').style.display = "block";
        document.getElementById('img01').src = event.target.src;
        document.getElementById('caption').innerHTML = event.target.alt;
    }

    function closeModal() {
        document.getElementById('myModal').style.display = "none";
    }


function exportToXLSX() {
/* 首先，定义一个空的 Workbook 对象 */
var wb = XLSX.utils.book_new();

/* 其次，使用 SheetJS 库提供的函数将表格数据转换成 Sheet 对象 */
var ws = XLSX.utils.table_to_sheet(document.querySelector('table'));

/* 最后，将 Sheet 对象添加到 Workbook 对象中，并使用 SheetJS 库提供的函数将 Workbook 对象保存为 XLSX 文件 */
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "inventory.xlsx");
}




    document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const products = document.querySelectorAll('table tbody tr');

    searchInput.addEventListener('input', function() {
        const searchText = searchInput.value.toLowerCase();

        products.forEach(function(product) {
            // 获取产品的名称、型号和颜色文本
            const id = product.querySelectorAll('td')[1].textContent.toLowerCase();
            const customerName = product.querySelectorAll('td')[2].textContent.toLowerCase();
            const name = product.querySelectorAll('td')[3].textContent.toLowerCase();
            const modelText = product.querySelectorAll('td')[4].textContent.toLowerCase();
            const colorText = product.querySelectorAll('td')[5].textContent.toLowerCase();

            // 检查是否有匹配
            if (id.includes(searchText) || customerName.includes(searchText) || name.includes(searchText) || modelText.includes(searchText) || colorText.includes(searchText)) {
                product.style.display = ''; // 显示匹配的产品
            } else {
                product.style.display = 'none'; // 隐藏不匹配的产品
            }
        });
    });
});
</script>
</body>
</html>
